{% extends 'base.html' %}
{% load static %}

{% block main %}

    <div class="container">
        <div class="page-header">
            <h1>Welcome to ChatApp
                <small>Pick a user and start chatting!</small>
            </h1>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div id="user-list" class="list-group">
                    <a href="" class="list-group-item disabled">
                        <h4 class="list-group-item-heading">Users</h4>
                        {# Users go here #}
                    </a>
                </div>
            </div>
            <div class="col-md-8">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h4 class="panel-title">Chat</h4>
                    </div>
                    <div>
                        <ul id="messages" class="messages">
                            {# Messages go here #}
                        </ul>
                    </div>
                    <div class="panel-footer">
                        <div class="input-group">
                            <input id="chat-input" type="text"
                                   class="form-control input"
                                   placeholder="Type your message here ..."
                                   maxlength="500">
                            <span class="input-group-btn">
                            <button class="btn btn-info btn"
                                    id="btn-send">
                                Send</button>
                        </span>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>

    <script>
        let sessionKey = '{{ request.session.session_key }}';
        let currentUser = '{{ request.user.username }}';
    </script>
    <script src="{% static 'js/app.js' %}"></script>

{% endblock %}